<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购物商城</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/layui/css/layui.css"
	media="all">
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath}/layui/layui.js"></script>
<link rel="stylesheet" type="text/css" href="css/home_page_css.css">
<style>
.a1 {
	width: 500px;
	height: 100%;
}

.a2 {
	width: 100%;
	height: 200px;
}

ul, li {
	list-style: none;
}

#manage {
	font-size: 20px;
	text-decoration: none;
	font-family: 宋体;
	cursor: pointer;
	margin-left: 60%;
}

#manage:hover {
	font-size: 25px;
	font-family: 微软雅黑;
	font-color: red;
}

#manage ul li {
	height: 30px; //
	文本区域的高度 float: none;
	border: 0 none transparent;
	border-bottom: 1px solid black;
	background-color: orange;
	font-size: 100%;
	margin: 0;
	margin-bottom: 60px;
	padding: 0;
}

* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
}

nav {
	width: 40px;
	height: 50px;
	background-color: red;
	/*  	float:right;  */
	/* 	 */
	/* 	margin: 0 auto; */
}

ul {
	list-style: none;
}

ul li {
	font-size: 16px;
	float: left;
	line-height: 40px;
	text-align: center;
	width: 100px;
}

a {
	text-decoration: none;
	color: #000;
	display: block;
}

a:hover {
	color: #F00;
	background-color: #666;
}

ul li ul li { 	
	float: none;
	background-color: #eee;
	margin: 2px 0px;
	display: block;
}
</style>
</head>
<body>


	<!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;float:right;"> -->
	<!--   <legend>导航带徽章和图片</legend> -->
	<!-- </fieldset> -->



	<div class="al" style="heigt: 400px;">


		<div class="top1" style="background: #f8edf5; height: 150px;">


			<fieldset class="layui-elem-field layui-field-title"
				style="margin-top: 0px; margin-left: 0px; width: 200px; height: 12px;">
				<legend style="width: 200px; position: absolute;">倒计时</legend>
				<div style="margin-top: 5px;">
					<div
						style="margin-left: 900px; position: absolute; margin-top: 10px;">
						<h1>欢迎来到购物商城</h1>
					</div>
					<div id="times"
						style="margin-top: 70px; position: absolute; margin-left: 930px;"></div>
				</div>
			</fieldset>
			请选择要计算的日期：
			<div class="layui-inline"
				style="margin-top: 0px; margin-left: 0px; width: 200px;">
				<input type="text" class="layui-input" id="test1"
					value="2021-01-01 00:00:00">
			</div>
			<blockquote class="layui-elem-quote"
				style="margin-top: 0px; width: 200px;">
				<div id="test2"></div>
			</blockquote>


			<%-- <div id="nav" >
				<ul>
					<li onmouseover="ShowSub(this)" onmouseout="HideSub(this)" style="float:right;margin-right:50px;margin-top:25px;"><a href="#"  >【我的资料】</a> 
						<ul>
							<li><a href=" Login_0615/modifyManager.jsp" target="right">修改信息</a></li>
							<li><a href=" Login_0615/modifyManagerPass.jsp" target="right">修改密码</a></li>
						</ul>
					</li>
					<li onmouseover="ShowSub(this)" onmouseout="HideSub(this)" style="float:right;margin-top:25px;"><a href="#"  >【用户管理】</a> 
						<ul>
							<li><a href=" Login_0615/show.jsp" target="right">用户查询</a></li>
							<li><a href="#" target="right">用户反馈</a></li>
						</ul>
					</li>
					<li onmouseover="ShowSub(this)" onmouseout="HideSub(this)" style="float:right;margin-top:25px;"><a href="#"  >【商品管理】</a> 
						<ul>
							<li><a href=" Login_0615/addGoodsType.jsp" target="right">添加商品类性</a></li>
							<li><a href="${pageContext.request.contextPath}/SendGoodsType" target="right">上架商品</a></li>
							<li><a href="#" target="right">删除商品</a></li>
						</ul>
					</li>
				</ul>
			</div> --%>


			<ul class="layui-nav"
				style="margin-top: 0px; float: right; margin-right: 0px; background-color: #b4e3fa; width: 100%;">

				<li class="layui-nav-item" lay-unselect="" style="float: right;">
					<a href="javascript:;"><img src="//t.cn/RCzsdCq"
						class="layui-nav-img"> 王</a>
					<dl class="layui-nav-child">
						<dd>
							<a href=" Login_0615/modifyManager.jsp" target="right">修改信息</a>
						</dd>
						<dd>
							<a href=" Login_0615/modifyManagerPass.jsp" target="right">修改密码</a>
						</dd>
						<dd>
							<a href="javascript:;">安全管理</a>
						</dd>
						<dd>
							<a href="Login_0615/exit.jsp ">退了</a>
						</dd>

					</dl>
				</li>

				<li class="layui-nav-item" style="float: right;"><a href="">个人中心<span
						class="layui-badge-dot"></span></a>
					<dl class="layui-nav-child">
						<dd>
							<a href=" Login_0615/modifyManager.jsp" target="right">基本资料</a>
						</dd>

					</dl></li>
				<li class="layui-nav-item" style="float: right;"><a href="">用户管理<span
						class="layui-badge">1</span></a>
					<dl class="layui-nav-child">
						<dd>
							<a href=" Login_0615/show.jsp" target="right">用户查询</a>
						</dd>

					</dl></li>

			</ul>

		</div>

		<div
			style="height: 100%; width: 200px; float: left; border: 0px; background-color: #eeeaed; border: 1px solid white;">
			<!-- <ul>
				<div
					style="height: 30px; width: 120px; margin-top: 30px; margin-left: 20px; background-color: #eeeaed;">
					<li><a href="#">商品分类</a></li>
				</div>

				<div
					style="height: 30px; width: 120px; margin-top: 30px; margin-left: 20px; background-color: #eeeaed;">
					<li><a href=" Login_0615/show.jsp" target="right">男装/女装</a></li>
				</div>

				<div
					style="height: 30px; width: 120px; margin-top: 30px; margin-left: 20px; background-color: #eeeaed;">
					<li><a href="Login_0615/modify.jsp">护肤彩妆</a></li>
				</div>

				<div
					style="height: 30px; width: 120px; margin-top: 30px; margin-left: 20px; background-color: #eeeaed;">
					<li><a href="Login_0615/modify.jsp">手表配饰</a></li>
				</div>

				<div
					style="height: 30px; width: 120px; margin-top: 30px; margin-left: 20px; background-color: #eeeaed;">
					<li><a href="Login_0615/exit.jsp ">退出登录</a></li>
				</div>

			</ul> -->

			<fieldset class="layui-elem-field layui-field-title"
				style="margin-top: 30px; margin-left: 10px;">
				<legend>商品分类</legend>
			</fieldset>

			<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo"
				style="margin-right: 10px; background-color: #ffcc99; margin-top: 150px;">
				<li class="layui-nav-item layui-nav-itemed"><a
					href="javascript:;">商品类型</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="${pageContext.request.contextPath}/SelectGoodsType"
								target="right">查看类型</a>
						</dd>
					</dl></li>
				<li class="layui-nav-item"><a href="javascript:;">商品信息</a>
					<dl class="layui-nav-child">
						<dd>
							<a href=" Login_0615/addGoodsType.jsp" target="right">添加商品类型</a>
						</dd>
						<dd>
							<a href="${pageContext.request.contextPath}/SendGoodsType"
								target="right">上架商品</a>
						</dd>
						<dd>
							<a href="${pageContext.request.contextPath}/QueryGoods2"
								target="right">查看商品</a>
						</dd>
					</dl></li>
				<li class="layui-nav-item"><a href=" javascript:;">订单管理</a>

					<dl class="layui-nav-child">
						<dd>
							<a href="${pageContext.request.contextPath}/QueryOrder"
								target="right">查看订单</a>
						</dd>
					</dl></li>

				<li class="layui-nav-item"><a href="">社区</a></li>
			</ul>
		</div>
		<div
			style="height: 820px; width: 74%; float: left; border: 1px solid white; margin-top: 200px;">
			<iframe name="right" src="" style="height: 100%; width: 100%;">

			</iframe>
		</div>
	</div>
</body>
<script type="text/javascript">
	function getDate() {
		//获取当前时间
		var date = new Date();
		//格式化为本地时间格式
		var date1 = date.toLocaleString();
		//获取div
		var div1 = document.getElementById("times");
		//将时间写入div
		div1.innerHTML = date1;
	}
	//使用定时器每秒向div写入当前时间
	setInterval("getDate()", 1000);

	function ShowSub(li) {
		var subMenu = li.getElementsByTagName("ul")[0];
		subMenu.style.display = " block ";
	}
	function HideSub(li) {
		var subMenu = li.getElementsByTagName("ul")[0];
		subMenu.style.display = " none ";
	}
</script>


<script>
	layui.use('element', function() {
		var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

		//监听导航点击
		element.on('nav(demo)', function(elem) {
			//console.log(elem)
			layer.msg(elem.text());
		});
	});
</script>


<script>
	layui.use('element', function() {
		var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

		//监听导航点击
		element.on('nav(demo)', function(elem) {
			//console.log(elem)
			layer.msg(elem.text());
		});
	});
</script>

<script>
	layui
			.use(
					[ 'util', 'laydate', 'layer' ],
					function() {
						var util = layui.util, laydate = layui.laydate, $ = layui.$, layer = layui.layer;
						//固定块
						util.fixbar({
							bar1 : true,
							bar2 : true,
							css : {
								right : 50,
								bottom : 100
							},
							bgcolor : '#393D49',
							click : function(type) {
								if (type === 'bar1') {
									layer.msg('icon 是可以随便换的')
								} else if (type === 'bar2') {
									layer.msg('两个 bar 都可以设定是否开启')
								}
							}
						});

						//倒计时
						var thisTimer, setCountdown = function(y, M, d, H, m, s) {
							var endTime = new Date(y, M || 0, d || 1, H || 0,
									m || 0, s || 0) //结束日期
							, serverTime = new Date(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的

							clearTimeout(thisTimer);
							util.countdown(endTime, serverTime, function(date,
									serverTime, timer) {
								var str = date[0] + '天' + date[1] + '时'
										+ date[2] + '分' + date[3] + '秒';
								lay('#test2').html(str);
								thisTimer = timer;
							});
						};
						setCountdown(2099, 1, 1);

						laydate.render({
							elem : '#test1',
							type : 'datetime',
							done : function(value, date) {
								setCountdown(date.year, date.month - 1,
										date.date, date.hours, date.minutes,
										date.seconds);
							}
						});

						//转换日期格式
						var toDateString = function(format) {
							var dateString = util.toDateString(new Date(),
									format); //执行转换日期格式的方法
							$('#test6').html(dateString);
						};
						toDateString($('#test5').val());
						//监听输入框事件
						$('#test5').on('keyup', function() {
							toDateString(this.value);
						});

						//处理属性 为 lay-active 的所有元素事件
						util.event('lay-active', {
							e1 : function() {
								layer.msg('触发了事件1');
							},
							e2 : function() {
								layer.msg('触发了事件2');
							},
							e3 : function() {
								layer.msg('触发了事件3');
							}
						});

						//XSS 过滤
						$('#test8').on('click', function() { //监听按钮事件
							var str = util.escape($('#test7').val()); //执行 xss 过滤方法
							alert(str);
						});
					});
</script>



</html>